<template>
  <div class="page">
      <div class="count grid" v-for="(item, index) in gridDataCopy" :key="index">
          <div class="main">
              <div class="dataBox">
                  <div class="title">
                      {{ item.name }}
                  </div>
                  <div class="data" :title="data[item.field]+item.unit" v-gradientTitle>
                      {{ dataStr(data[item.field]) }}{{ item.unit }}
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import {ref, toRefs, watch, computed} from "vue";

import jdzsj from "@assets/dwgk/jdIcon.png"
import zczjz from "@assets/dwgk/zcIcon.png"
import xfwhcs from "@assets/dwgk/xfIcon.png"
import xmsl from "@assets/dwgk/xmIcon.png"
export default {
    name: "baseMes",
    props:{
        data:{
            type: Object,
            default(){
                return {}
            }
        }
    },
    setup(props, content){

        let gridData = ref([
            {
                name: '占地面积',
                count: 10,
                unit: 'm²',
                icon: jdzsj,
                field: 'area'
            },
            {
                name: '住户人数',
                count: 10,
                unit: '人',
                icon: zczjz,
                field: 'population'
            },
            {
                name: '住户数',
                count: 10,
                unit: '户',
                icon: xmsl,
                field: 'households'
            },
            {
                name: '建筑物总面积',
                count: 10,
                unit: 'm²',
                icon: xfwhcs,
                field: 'buildingsTotal'
            }
        ])

        let gridDataCopy = computed(() => {
            return gridData.value.map(item => {
                item.count = props.data[item.field]
                return item
            })
        })



        let dataStr = computed(() => {
            return data => {
                if(data != 0 && data == void 0){
                    return "--"
                }else{
                    return data.toString().split(".")[0]
                }
            }
        })

        return {
            dataStr,
            gridData,
            gridDataCopy,
        }
    }
}
</script>

<style scoped lang="less">
.page{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    .grid{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .main{
            width: 100%;
            height: 100%;
            background: url("/src/assets/itemBcg.png") center center no-repeat;
            background-size: auto 100%;
            .dataBox{
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: relative;
                transform: translateY(-10px);
                .title, .data{
                    color: #fff;
                    text-align: center;
                }
                .data{
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 26px;
                }
                .title{
                    font-size: 20px;
                    //font-weight: bold;
                    font-family: YouSheBiaoTiHei;
                }
            }

        }
    }
}
</style>
